<template>
  <div class="radio-rank">
    <nav-bar class="nav-bar">
      <div slot="left">
        <img src="../../../assets/img/common/back.svg" alt="" @click="back">
      </div>
      <div slot="center">
        <p>电台排行</p>
      </div>
    </nav-bar>
    <div class="contain">
    <div class="top">
      <div class="left">
        <radio-rank-style2 v-bind:item="rankstyle2">
          <div slot="rank">
            <p class="rank">2</p>
          </div>
        </radio-rank-style2>
      </div>
      <div class="middle">
        <radio-rank-style1 v-bind:item="rankstyle1"></radio-rank-style1>
      </div>
      <div class="right">
        <radio-rank-style2 v-bind:item="rankstyle3">
          <div slot="rank">
            <p class="rank">3</p>
          </div>
        </radio-rank-style2>
      </div>
    </div>
    <div class="bottom">
          <radio-rank-style3 v-bind:item="rankstyle4"></radio-rank-style3>
    </div>
  </div>

  </div>
</template>

<script>
  import {getRadioRank} from "../../../network/radio";
  import RadioRankStyle1 from "../../../components/content/RadioRankItems/RadioRankStyle1";
  import RadioRankStyle2 from "../../../components/content/RadioRankItems/RadioRankStyle2";
  import RadioRankStyle3 from "../../../components/content/RadioRankItems/RadioRankStyle3";
  import NavBar from "../../../components/common/navbar/NavBar";
    export default {
        name: "RadioRank",
        components:{
            NavBar,
            RadioRankStyle1,
            RadioRankStyle2,
            RadioRankStyle3
        },
        data(){
          return{
              rankAllList:[],
              rankstyle1:[],
              rankstyle2:[],
              rankstyle3:[],
              rankstyle4:[],
              item:{},
                rank:0,//排名
                score:0,//得分
                programid:'',//电台ID
                picUrl:'',//封面
                name:'',//歌曲名
                id:'',//歌曲id
                singer:'',//作者

          }
        },
        methods:{
            back(){
                this.$router.back();
            },
        },
        created() {
            getRadioRank().then(res=>{
                // console.log('排名' + res.data.toplist[0].rank)
                // console.log('得分' + res.data.toplist[0].score)
                // console.log('电台ID' + res.data.toplist[0].program.id)
                // console.log('封面' + res.data.toplist[0].program.coverUrl)
                // console.log('歌曲名' + res.data.toplist[0].program.name)
                // console.log('歌曲ID' + res.data.toplist[0].program.mainSong.id)
                // console.log('作者' + res.data.toplist[0].program.mainSong.artists[0].name)
                for(let item of res.data.toplist){
                    this.rank = item.rank
                    this.score = item.score
                    this.programid = item.program.id
                    this.picUrl = item.program.coverUrl
                    this.name = item.program.name
                    this.id = item.program.mainSong.id
                    this.singer = item.program.mainSong.artists[0].name
                    this.item = {
                        rank:this.rank,
                        score:this.score,
                        programid:this.programid,
                        picUrl:this.picUrl,
                        name:this.name,
                        id:this.id,
                        singer:this.singer,
                    }
                    this.rankAllList.push(this.item)
                }
                this.rankstyle1 = this.rankAllList.splice(0,1)
                this.rankstyle2 = this.rankAllList.splice(1,1)
                this.rankstyle3 = this.rankAllList.splice(2,1)
                this.rankstyle4 = this.rankAllList.splice(3)
            })
        }
    }
</script>

<style scoped>
  .radio-rank{
    width: 100%;
    position: relative;

    top: -44px;
  }

  .nav-bar{
    width: 100%;

    /*position: absolute;*/
    /*top: -44px;*/
    position: fixed;
    top: 0px;

    z-index: 10;
    background-color: white;
  }

  .contain{
    width: 100%;
    background-color: #f5f5f5;
    position: relative;
    top: 44px;
  }

  .top{
    position: relative;
    width: 90%;
    height: 170px;
    border-radius: 20px;
    top: 54px;
    left: 5%;
    background-color: white;
    box-shadow: 2px 2px 2px rgba(100,100,100,0.1);

    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    place-items:center center;
  }

  .rank{
    text-align: center;
    color: #DB2C1F;
    font-weight: 600;
    font-size: 23px;
    margin-bottom: 5px;
  }

  .left{
    position: relative;
    bottom: -45px;
  }

  .middle{
    position: relative;
    bottom: -40px;
  }

  .right{
    position: relative;
    bottom: -45px;
  }

  .bottom{
    position: relative;
    top: 110px;
  }

</style>